<template>
  <view class="container">
    <!-- 轮播图 -->
    <view class="banner-section">
      <swiper class="banner-swiper" autoplay circular indicator-dots>
        <swiper-item v-for="(banner, index) in bannerList" :key="index">
          <image class="banner-image" :src="banner.image" mode="aspectFill" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 快捷功能导航 -->
    <view class="service-grid">
      <view class="service-title">医疗服务</view>
      <view class="service-items">
        <view 
          v-for="(service, index) in serviceList"
          :key="index"
          class="service-item"
          @click="navigateToService(service)"
        >
          <view class="service-icon" :class="`icon-${service.type}`">
            <van-icon :name="service.icon" size="32" :color="service.color" />
          </view>
          <text class="service-text">{{ service.name }}</text>
        </view>
      </view>
    </view>

    <!-- 医院新闻 -->
    <view class="news-section">
      <van-cell-group>
        <van-cell title="医院新闻" :border="false">
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <van-cell
          v-for="(news, index) in newsList"
          :key="index"
          :title="news.title"
          :label="news.date"
          :border="index !== newsList.length - 1"
          is-link
          @click="viewNews(news)"
        />
      </van-cell-group>
    </view>

    <!-- 底部导航 -->
    <TabBar currentTab="index" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores";

const userStore = useUserStore();

const bannerList = ref([
  { image: "/static/logo.png" }, // 临时使用logo作为banner
  { image: "/static/logo.png" },
  { image: "/static/logo.png" },
]);

const serviceList = ref([
  {
    name: "预约挂号",
    icon: "calendar-o",
    color: "#07C160",
    type: "appointment",
    path: "/pages/appointment/medical-card-select",
    // path: "/pages/appointment/department-select", // 修改前的路径
  },
  { 
    name: "线上门诊", 
    icon: "chat-o", 
    color: "#1989fa",
    type: "consultation",
    path: "/pages/online-consultation/info" 
  },
  { 
    name: "智能导诊", 
    icon: "question-o", 
    color: "#ff6b35",
    type: "guide",
    path: "/pages/ai-guide/index" 
  },
  { 
    name: "慢病医疗", 
    icon: "records", 
    color: "#9c5cff",
    type: "chronic",
    path: "/pages/chronic-disease/index" 
  },
]);

const newsList = ref([
  {
    id: 1,
    title: "我院开展新冠疫苗接种工作",
    date: "2024-01-15",
    content: "为做好新冠疫苗接种工作...",
  },
  {
    id: 2,
    title: "春节期间门诊安排通知",
    date: "2024-01-10",
    content: "春节期间，我院门诊安排如下...",
  },
  {
    id: 3,
    title: "健康体检优惠活动开始",
    date: "2024-01-05",
    content: "为回馈广大患者，我院推出...",
  },
]);

const navigateToService = (service: any) => {
  uni.navigateTo({
    url: service.path,
  });
};

const viewNews = (news: any) => {
  console.log("查看新闻:", news);
  uni.showToast({
    title: "功能开发中",
    icon: "none",
  });
};

onLoad(() => {
  console.log("医疗服务首页 onLoad");
});

onShow(() => {
  console.log("医疗服务首页 onShow");
});
</script>

<style lang="scss">
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 140rpx; // 为TabBar留出更多空间
}

.banner-section {
  margin-bottom: 32rpx;

  .banner-swiper {
    width: 100%;
    height: 360rpx;

    .banner-image {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }
  }
}

.service-grid {
  background: white;
  margin: 0 24rpx 32rpx;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

  .service-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #323233;
    margin-bottom: 32rpx;
    text-align: left;
  }

  .service-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24rpx;
  }

  .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16rpx;
    border-radius: 12rpx;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.95);
      background-color: #f8f9fa;
    }
  }

  .service-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12rpx;
    transition: transform 0.3s ease;

    &.icon-appointment {
      background: rgba(7, 193, 96, 0.1);
    }

    &.icon-consultation {
      background: rgba(25, 137, 250, 0.1);
    }

    &.icon-guide {
      background: rgba(255, 107, 53, 0.1);
    }

    &.icon-chronic {
      background: rgba(156, 92, 255, 0.1);
    }

    &:active {
      transform: scale(1.1);
    }
  }

  .service-text {
    font-size: 24rpx;
    color: #323233;
    text-align: center;
    line-height: 1.2;
  }
}

.news-section {
  background: white;
  margin: 0 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
</style>
